<template>
	<view class="detail">
		<view class="fixbg" :style="{'background-image': 'url(' + songDetail.al.picUrl +' )'}"></view>
		<musichead :title="songDetail.name" :icon="true" color="white"></musichead>
		<view class="container" v-show="!isLoading">
			<scroll-view scroll-y="true">
				<!-- logo-title -->
				<view class="detail-flag">
					<image src="/static/netease.jpeg" mode="" class="detail-flag-img"></image>
					网易云音乐
				</view>
				<!-- 播放区域 -->
				<view class="detail-play" @tap="handleToPlayOrPause">
					<image :src="songDetail.al.picUrl" mode="" :class="{ 'detail-play-run' : isPlayRotate }"></image>
					<text class="iconfont" :class="iconPlay"></text>
					<view>

					</view>
				</view>
				<!-- 歌词部分 -->
				<view class="detail-lyric">
					<view class="detail-lyric-wrap" :style="{ transform: 'translateY('+ -(lyricIndex-1)*82 +'rpx)'}">
						<view class="detail-lyric-item" :class="{ active : lyricIndex == index }"
							v-for="(item, index) of songLyric" :key="index">
							{{item.lyric}}
						</view>
						<!-- 						<view class="detail-lyric-item active">
							测试文字
						</view>
						<view class="detail-lyric-item">
							测试文字
						</view> -->
					</view>
				</view>
				<!-- 喜欢这首歌的人推荐 -->
				<view class="detail-like">
					<view class="detail-like-head">
						喜欢这首歌的人也听
					</view>
					<view class="detail-like-item" v-for="(item, index) of songSimi" :key="index" @tap="handleToPlaySimi(item.id)">
						<view class="detail-like-img">
							<image :src="item.album.picUrl" mode=""></image>
						</view>
						<view class="detail-like-song">
							<view>{{item.name}}</view>
							<view>
								<image v-if="item.privilege.flag > 2000000 && item.privilege.flag < 3000000"
									src="/static/dujia.png" mode=""></image>
								<image v-if="item.privilege.maxbr == 999000" src="/static/sq.png" mode=""></image>
								{{item.artists[0].name}} - {{item.album.name}}
							</view>
						</view>
						<text class="iconfont icon-bofang"></text>
					</view>
					<!-- 					<view class="detail-like-item">
						<view class="detail-like-img">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="detail-like-song">
							<view>跳楼机</view>
							<view>
								<image src="/static/dujia.png" mode=""></image>
								<image src="/static/dujia.png" mode=""></image>
								张靓颖 - 跳楼机
							</view>
						</view>
						<text class="iconfont icon-bofang"></text>
					</view> -->
				</view>
				<!-- 歌曲评论 -->
				<view class="detail-comment">
					<view class="detail-comment-head">精彩评论</view>
					<view class="detail-comment-item" v-for="(item, index) of songComment" :key="index">
						<view class="detail-comment-item-img">
							<image :src="item.user.avatarUrl" mode=""></image>
						</view>
						<view class="detail-comment-item-content">
							<view class="detail-comment-item-title">
								<view class="detail-comment-item-name">
									<view>
										{{item.user.nickname}}
									</view>
									<view>{{item.time}}</view>
								</view>
								<view class="detail-comment-item-like">
									{{item.likedCount}}
									<text class="iconfont icon-dianzan"></text>
								</view>
							</view>
							<view class="detail-comment-text">
								{{item.content}}
							</view>
						</view>
					</view>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	import '@/common/iconfont.css';
	import musichead from '@/components/musichead/musichead.vue'
	import {
		formatCount,
		formatTime,
		formatTimeToSecond
	} from '../../utils/utils.js'
	import {
		detail,
		simi,
		comment,
		lyric,
		song
	} from '@/common/api.js'
	import useStore from '@/store/index.js'
	const store = useStore()
	export default {
		data() {
			return {
				// 控制歌词选中状态
				lyricIndex: 0,
				// 控制播放键和暂停键
				iconPlay: 'icon-zanting',
				// 图片是否旋转
				isPlayRotate: true,

				songDetail: {
					al: {
						picUrl: '',
					},
				},
				songSimi: [{
					album: {
						name: '',
					},
					picUrl: '',
					artists: [{
						name: ''
					}],
					privilege: {
						flag: 0,
						maxbr: 0,
					},
				}],
				songComment: [{
						user: {
							avatarUrl: '',
							nickname: ''
						},

						content: '',
						likedCount: 0,
						time: 0,
					},

				],
				songLyric: [],
				songUrl: '',
				isLoading: true,
			}

		},
		methods: {
			getSong(id) {
				store.setNextId(id)
				uni.showLoading({
					title: '歌曲正在赶来......'
				})
				this.isLoading = true;
				Promise.all([detail(id), simi(id), comment(id), lyric(id), song(id)]).then(res => {
					console.log(res);
					if (res[0].data.code == 200) {
						this.songDetail = res[0].data.songs[0];
					}
					if (res[1].data.code == 200) {
						this.songSimi = res[1].data.songs
					}
					if (res[2].data.code == 200) {
						this.songComment = res[2].data.hotComments;
						this.songComment.forEach(item => {
							item.likedCount = formatCount(item.likedCount)
							item.time = formatTime(item.time)
						})
					}
					if (res[3].data.code == 200) {
						let tmpLyric = res[3].data.lrc.lyric;

						let regx = /\[([^\]]+)\]([^\[]+)/g;
						let resultLrc = [];
						tmpLyric.replace(regx, ($0, $1, $2) => {
							resultLrc.push({
								"time": formatTimeToSecond($1),
								"lyric": $2
							})
						})
						this.songLyric = resultLrc;
					}
					if (res[4].data.code == 200) {
						this.songUrl = res[4].data.data[0].url
						// #ifdef MP-WEIXIN
						this.bgAudioManager = uni.getBackgroundAudioManager();
						this.bgAudioManager.title = this.songDetail.name;
						// #endif
						// #ifdef H5
						if(!this.bgAudioManager){
							this.bgAudioManager = uni.createInnerAudioContext();
							this.bgAudioManager.autoplay = true;
						}
						this.iconPlay = 'icon-bofang1';
						this.isPlayRotate = false;
						// #endif
						this.bgAudioManager.src = this.songUrl || ''
						this.listenLyricIndex()
						// 播放时的回调
						this.bgAudioManager.onPlay(() => {
							this.isPlayRotate = true;
							this.iconPlay = 'icon-zanting'
							this.listenLyricIndex()
						})
						// 暂停时的回调	
						this.bgAudioManager.onPause(() => {
							this.isPlayRotate = false;
							this.iconPlay = 'icon-bofang1';
							this.cancelLyricIndex();
						});
						this.bgAudioManager.onEnded(() => {
							this.getSong(store.nextId)
						})
					}
					this.isLoading = false;
					uni.hideLoading();

				})


			},
			// 播放暂停
			handleToPlayOrPause() {

				if (this.bgAudioManager.paused) {
					this.bgAudioManager.play()
				} else {
					this.bgAudioManager.pause()
				}
			},
			// 
			listenLyricIndex() {
				clearInterval(this.timer)
				this.timer = setInterval(() => {
					for (let i = 0; i < this.songLyric.length; i++) {
						if (this.bgAudioManager.currentTime > this.songLyric[this.songLyric.length - 1]) {
							this.lyricIndex = this.songLyric.length - 1;
							break;
						}
						if (this.bgAudioManager.currentTime > this.songLyric[i].time && this.bgAudioManager
							.currentTime < this.songLyric[i + 1].time) {
							this.lyricIndex = i;
						}
					}
				}, 500)
			},
			cancelLyricIndex() {
				clearInterval(this.timer)
			},
				
			handleToPlaySimi(id){
				this.getSong(id);
			}
		},
		computed: {

		},
		components: {
			musichead
		},
		onLoad(options) {

			this.getSong(options.id)

			this.isLoading = false
			uni.hideLoading()
		},
		onUnload() {
			this.cancelLyricIndex();
			// #ifdef H5
			this.bgAudioManager.destroy()
			// #endif
		},

		onHide() {
			this.cancelLyricIndex();
			// #ifdef H5
			this.bgAudioManager.destroy()
			// #endif
		}
	}
</script>

<style scoped>
	.detail-flag {
		position: absolute;
		/* float: left; */
		top: 30rpx;
		margin-left: 30rpx;
		height: 30rpx;
		left: 10rpx;
		display: flex;
		align-items: center;
		color: #fff;

	}

	.detail-play {
		width: 580rpx;
		height: 580rpx;
		background-image: url('');
		background-size: cover;
		margin: 214rpx auto 0 auto;
		position: relative;
	}

	.detail-play image {
		width: 370rpx;
		height: 370rpx;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		animation: 10s linear move infinite;
		animation-play-state: paused;
	}

	.detail-play .detail-play-run {
		animation-play-state: running;
	}

	@keyframes move {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.detail-play text {
		height: 100rpx;
		width: 100rpx;
		font-size: 100rpx;
		color: #fff;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}



	.detail-play view {
		width: 430rpx;
		height: 360rpx;
		position: absolute;
		background-image: url(~@/static/needle.png);
		background-repeat: no-repeat;
		background-size: contain;
		left: 0;
		right: 0;
		margin: auto;
		top: -200rpx;
	}

	.detail-lyric {
		font-size: 32rpx;
		line-height: 82rpx;
		height: 246rpx;
		text-align: center;
		overflow: hidden;
		color: #6f6f6f;
	}

	.detail-lyric-wrap {
		transition: 0.5s;
	}

	.detail-lyric-item {
		height: 82rpx;
	}

	.active {
		color: white;
	}

	.detail-like {
		margin: 0 30rpx;
	}

	.detail-like-head {
		color: white;
		font-size: 36rpx;
		margin: 50rpx 0;
	}

	.detail-like-item {
		display: flex;
		margin-bottom: 28rpx;
		align-items: center;
	}

	.detail-like-img {
		width: 82rpx;
		height: 82rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.detail-like-img image {
		width: 100%;
		height: 100%;
	}

	.detail-like-song {
		flex: 1;
	}

	.detail-like-song view:nth-child(1) {
		font-size: 28rpx;
		color: white;
		margin-bottom: 12rpx;
	}

	.detail-like-song view:nth-child(2) {
		color: #626262;
		font-size: 22rpx;
	}

	.detail-like-item text {
		width: 50rpx;
		height: 50rpx;
		font-size: 50rpx;
		color: #c0c2c7;
		font-weight: bolder;
	}

	.detail-like-song image {
		width: 26rpx;
		height: 20rpx;
		margin-right: 10rpx;
		/* object-fit: cover; */
		object-fit: contain;
	}

	.detail-flag-img {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 10rpx;
	}


	/* 歌曲评论 */
	.detail-comment {
		margin: 0 30rpx;
	}

	.detail-comment-head {
		font-size: 36rpx;
		color: white;
		margin: 50rpx 0;
	}

	.detail-comment-item {
		margin-bottom: 28rpx;
		display: flex;
	}

	.detail-comment-item-img {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 18rpx;
	}

	.detail-comment-item-img image {
		width: 100%;
		height: 100%;
	}

	.detail-comment-item-content {
		flex: 1;
		color: #cbcacf;
	}

	.detail-comment-item-title {
		display: flex;
		justify-content: space-between;
	}

	.detail-comment-item-name {}

	.detail-comment-item-name view:nth-child(1) {
		font-size: 26rpx;
	}

	.detail-comment-item-name view:nth-child(2) {
		font-size: 20rpx;
	}

	.detail-comment-item-like {
		font-size: 28rpx;
	}

	.detail-comment-item-like text {}

	.detail-comment-text {
		line-height: 40rpx;
		font-size: 28rpx;
		color: #fff;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #e0e0e0;
	}
</style>